{include file="common/public/header"}
<style type="text/css">
    .head{
        height: 3rem;
        line-height: 3rem;
        font: 14px/48px PingFang SC;
        text-align: -webkit-left;
    }
    .list-tittle-item {
        float: left;
        line-height: 3rem;
        text-align: center;
        padding: 0 2rem 0 2rem;
        border-top: 1px solid #e0e0e0;
        border-right: 1px solid #e0e0e0;
        border-left: 1px solid #e0e0e0;
        background: #fff;
        cursor: pointer;
    }
    .active {
        border-bottom: 1px solid #fff;
        color: #1871f8;
        z-index: 1;
    }
    .content {
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 0 4px 4px 4px;
        padding: 0 16px 0 16px;
        margin-top: 1px;
    }
    .li-list {
        height: 63px;
        border-bottom: 1px solid #e0e0e0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .li-item {
        display: flex;
        cursor: pointer;
    }
    .li-item-read {
        font-family: PingFang SC;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 64px;
        color: #7a7a7a;
    }
    .li-time {
        font-family: Lato;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 64px;
        color: #7a7a7a;
    }
    .pagination {
        display: flex;
    }
    .pagination li {
        list-style: none;
        margin: 0 5px 0 5px;
        background-color: #f4f4f5;
        color: #606266;
        width: 50px;
        text-align: center;
    }
    .pagination .active {
        background-color: #4060ff;
        color: #fff;
    }
    .pagination .disabled {
        cursor: not-allowed!important;
    }
    .page {
        margin-top: 25px;
        display: flex;
        height: 37px;
        line-height: 37px;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
    }
    input[type='number'] {
        -moz-appearance: textfield;
    }
</style>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-card">
            <div class="layui-card-header">{$page_title}</div>
            <div class="layui-card-body">
                <form class="layui-form padsome" action="">
                <!--跳转导航-->
                <div class="head">
                    <div class="list-tittle-item {if $t_id eq 0}active{/if}" onclick="window.open('list.html','_self')">全部</div>
                    {foreach $type_list as $item}
                        <div class="list-tittle-item {if $t_id eq $item.id}active{/if}" onclick="window.open('list.html?t_id={$item.id}','_self')">{$item.type_name}</div>
                    {/foreach}
                </div>
                <!--内容列表-->
                <div class="content" id="layerDemo">
                    <ul>
                        {foreach $list as $item}
                        <li class="li-list">
                            <div class="li-item"><p class="li-item-read" id="{$item.id}">{$item.title}</p></div>
                            <p class="li-time">{$item.add_time}</p>
                        </li>
                        {/foreach}
                    </ul>
                </div>

                <!--分页按钮输出开始-->
                    {if $count > 15}
                <div class="page">
                    {$page|raw}
                    <div><p>前往<input style="border-width: 1px;
    border-style: solid;
    background-color: #fff;
    border-radius: 3px;
    padding: 10px;
    width: 25px;
    text-align: center;
    margin: 0 5px 0 5px;" type="number" min="1" name="page" value="{$input_page}">页</p>
                    </div>

                </div>
                    {/if}
                <!--分页按钮输出结束-->
                </form>
            </div>
        </div>
    </div>
</div>
{include file="common/public/footer" /}

<script>
    layui.use(['laypage','layer', 'form'], function(){ //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

        //弹窗
        $('.li-item-read').on('click', function(){
            $.ajax({
                url: "details",
                type: "post",
                data: {id:$(this).attr("id")},
                dataType: 'json',
                success: function (result) {
                    console.log(result)
                    if (result.code == 1) {
                        //示范一个公告层
                        layer.open({
                            type: 1
                            ,title: false //不显示标题栏
                            ,closeBtn: false
                            ,area: ['600px','800px']
                            ,shade: 0.8
                            ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                            ,btn: ['关闭']
                            ,btnAlign: 'c'
                            ,moveType: 1 //拖拽模式，0或者1
                            ,title: '<div style="text-align: center;font-size: 17px;font-weight: 700;">' + result.data.title + '</div>'
                            ,content: '<div style="padding: 30px; line-height: 22px; font-weight: 300;">' + result.data.content + '</div>'
                            ,success: function(layero){
                                var btn = layero.find('.layui-layer-btn');
                                btn.find('.layui-layer-btn0').attr({
                                    target: '_blank'
                                });
                            }
                        });
                    } else {
                        layer.msg("不好意思，失败了...")
                    }
                }
            });
        });

    });
</script>